<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Make PDF</title>
    <style>
        .main {
            width: 960px;
            height: 480px;
            margin: 0px auto;
            margin-top: 20px;
            padding: 10px;
            display: flex;
        }

        .body {
            width: 95%;
            height: 480px;
            padding-top: 40px;
        }

        .title {
            width: 100%;
            height: 40px;
            display: flex;
        }

        .title .div1 {
            width: 60%;
            text-align: right;
        }

        .title .div1 .divCtn {
            width: 230px;
            height: 40px;
            float: right;
        }

        .title .div1 .divCtn .titleCtn {
            width: 230px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 25px;
            font-weight: bold;
        }

        .title .div1 .divCtn .titleUdeLine {
            width: 230px;
            height: 6px;
            border-bottom: solid 2px #9C5223;
            border-top: solid 2px #9C5223;
        }

        .title .div2 {
            width: 40%;
            text-align: right;
            height: 40px;
            line-height: 30px;
            font-size: 20px;
            font-weight: bold;
        }

        .date {
            width: 100%;
            height: 40px;
            display: flex;
        }

        .date .deDiv1 {
            width: 60%;
            height: 40px;
            line-height: 40px;
            text-align: right;
            font-size: 18px;
        }

        .date .deDiv2 {
            width: 40%;
            height: 40px;
            line-height: 40px;
            text-align: right;
            font-size: 18px;
        }

        .tempTr1 td {
            text-align: center;
        }

        table tr td {
            padding: 5px;
        }

        .tempTr2 td {
            height: 40px;
            text-align: center;
        }

        .end {
            width: 5%;
            height: 480px;
        }

        .buttonBox {
            width: 960px;
            height: 480px;
            margin: 0px auto;
        }

        .buttonBox button {
            padding: 5px;
            background-color: #888888;
            color: #FFFFFF;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 需要打印的pdf页面放在这里 -->
    <div class="main">
        <div class="body">
            <div class="title">
                <div class="div1">
                    <div class="divCtn">
                        <div class="titleCtn">收&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;据</div>
                        <div class="titleUdeLine"></div>
                    </div>
                </div>
                <div class="div2">NO：<span style="color: #9C5223;">1313215</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
            </div>
            <div class="date">
                <div class="deDiv1">
                    2019年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;03日
                </div>
                <div class="deDiv2">第&nbsp;&nbsp;&nbsp;&nbsp;201&nbsp;&nbsp;&nbsp;&nbsp;号</div>
            </div>
            <table border="1" style="width: 100%; border-collapse: collapse;">
                <tr class="tempTr2">
                    <td colspan="6" style="border-right-color: #FFFFFF; width: 50%; text-align: left;">
                        &nbsp;&nbsp;兹&nbsp;&nbsp;收&nbsp;&nbsp;到&nbsp;&nbsp; 李松山</td>
                    <td colspan="6" style="width: 50%;">
                        交&nbsp;&nbsp;来&nbsp;&nbsp;下&nbsp;&nbsp;列&nbsp;&nbsp;款&nbsp;&nbsp;项&nbsp;&nbsp;此&nbsp;&nbsp;据
                    </td>
                </tr>
                <tr>
                    <td align="center" rowspan="2" style="width: 60%;">
                        摘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;要</td>
                    <td colspan="10" align="center" style="width: 10%;">金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</td>
                    <td rowspan="2" align="center" style="width: 30%;">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</td>
                </tr>
                <tr class="tempTr1">
                    <td>￥</td>
                    <td>百</td>
                    <td>十</td>
                    <td>万</td>
                    <td>千</td>
                    <td>百</td>
                    <td>十</td>
                    <td>元</td>
                    <td>角</td>
                    <td>分</td>
                </tr>
                <tr class="tempTr2">
                    <td>天河小区5栋23楼3单元2019年1-6月份水电费</td>
                    <td>￥</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>6</td>
                    <td>5</td>
                    <td>3</td>
                    <td>2</td>
                    <td>8</td>
                    <td>3</td>
                    <td>支付方式：现金</td>
                </tr>
                <tr class="tempTr2">
                    <td></td>
                    <td>￥</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr class="tempTr2">
                    <td></td>
                    <td>￥</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr class="tempTr2">
                    <td colspan="12" style=" text-align: left;">
                        合计人民币（大写）陆仟伍佰叁拾贰元捌角叁分
                        <div style="float: right; display: flex;">
                            <div style="font-size: 20px;">￥：</div>
                            <div
                                style="width: 180px; height: 30px; border-bottom: solid #000000 1px; text-align: center;">
                                6532.83</div>
                        </div>
                    </td>
                </tr>
            </table>
            <div style="width: 100%; display: flex; height: 40px;">
                <div style="width: 50%; height: 40px; line-height: 40px;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主管：鲁迅</div>
                <div style="width: 50%; height: 40px; line-height: 40px;">经手人：周树人</div>
            </div>
        </div>
        <div class="end">
            <div style="margin-top: 160px; text-align: center; height: 230px;width: 100%;">
                第<br />二<br />联<br />：<br />存<br />根</div>
        </div>
    </div>
    <div class="buttonBox">
        <button onclick="generatePDF()">导出PDF</button>
    </div>
</body>
<!-- 先加载 html2canvas（如果需要） -->
<script src="js/cdnjs.cloudflare.com-ajax-libs-html2canvas-1.4.1/html2canvas.min.js"></script>
<!-- 然后加载 jsPDF -->
<script src="js/cdnjs.cloudflare.com-ajax-libs-jspdf-2.5.1/jspdf.umd.min.js"></script>
<script>
    const { jsPDF } = window.jspdf;
    function generatePDF() {
        const element = document.querySelector(".main");
        if (!element) {
            console.error("未找到要导出的元素");
            return;
        }

        const isConfirmed = confirm("确定导出PDF页面？");
        if (!isConfirmed) return;

        try {
            html2canvas(element, { scale: 2 }).then(canvas => {
                const pdf = new jsPDF({
                    orientation: 'portrait',
                    unit: 'mm',
                    format: 'a4'
                });

                const pageWidth = 190;
                const pageHeight = (canvas.height * pageWidth) / canvas.width;

                let heightLeft = pageHeight;
                let position = 10;

                pdf.addImage(canvas, 'PNG', 10, position, pageWidth, pageHeight);
                heightLeft -= pdf.internal.pageSize.getHeight() - 30;

                while (heightLeft > 0) {
                    pdf.addPage();
                    position = -(pdf.internal.pageSize.getHeight() - 30 - heightLeft);
                    pdf.addImage(canvas, 'PNG', 10, position, pageWidth, pageHeight);
                    heightLeft -= pdf.internal.pageSize.getHeight() - 30;
                }

                const filename = `MakePDF_${Date.now()}.pdf`;
                pdf.save(filename);
            });
        } catch (error) {
            console.error("导出PDF失败：", error);
            alert("导出PDF时发生错误，请重试。");
        }
    }
</script>

</html>